<template>
	<view>
		<!--顶部标题0的布局样式-->
		<view  class="title" style="top: 0px;z-index: 345;width: 100%;border-bottom: 2rpx solid #eee;">
			<view class="cu-bar bg-white">
				<view class="action">
				</view>
				<view class="content text-bold text-">商品分类</view>
			</view>
		</view>

		<view class="VerticalBox">
			<!--  左边tab -->
			<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation style="height:calc(100vh - 375upx)">
				<view class="cu-item" :class="index1 == tabCur ? 'text-green cur' : ''" v-for="(item1, index1) in categoryList" :key="index1"
					@tap="TabSelectOne(index1)">
					{{ item1.name }}
				</view>
			</scroll-view>

			<!-- 右边tab，等待左边tab选中 -->
			<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh - 375upx)"
				:scroll-into-view="'tabTop' + mainCur">
				<!-- 控制右边位置 -->
				<view class="padding-top padding-lr" v-for="(item2, index2) in categoryTwoList" :key="index2" :id="'tabTop' + index2">
					<!--  tab展示  -->
					<view class="cu-bar solid-bottom bg-white tabTopTitle">
						<view class="action">
							<text class="cuIcon-title text-green"></text>
							{{ item2.name }}
						</view>
					</view>
					<!--  子类别展示区 -->
					<view class="cu-list menu-avatar">
						<view class="padding bg-white solid-bottom">
							<view style="margin-left: 5%;margin-bottom: 8%;" v-for="(item3, index3) in item2.children" :key="index3"
								class="cu-tag round">
								<view style="width: 150rpx;" @tap="categorySelect(item3)"> {{ item3.name }}</view>
							</view>
							<!-- <view class='cu-tag radius'>圆角</view> -->
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				categoryList: [], // 类别数据
				categoryTwoList: [], // 二级类别数据
				tabCur: 0, // 控制左边选中
				mainCur: 0, //控制右边滚动位置
			};
		},
		onLoad() {
			// 加载左tab
			uni.showLoading({
				title: '加载中...',
				mask: true
			});

			// 分类
			this.crud.get(this.path, "/api/client/all/category/tree?disable=0").then(res => {
				this.categoryList = res.data.data;
				// 默认选中
				this.listCur = this.categoryList[0];
				this.categoryTwoList = this.categoryList[0].children
			})
		},
		onReady() {
			uni.hideLoading();
		},
		methods: {
			// tab 选中联动
			TabSelectOne(index) {
				// 获取当前选中索引
				this.tabCur = index;
				// 左边选中位置更新
				this.mainCur = index;
				// 下级分类
				this.categoryTwoList = this.categoryList[index].children

				// 右边选中位置更新 tab 选中联动
				//滚动页面到选中的tab
				uni.createSelectorQuery().select('#tabTop' + index).boundingClientRect(data => { // 目标节点盒子
					uni.createSelectorQuery().select('.tabTopTitle').boundingClientRect(res => { // 每一个tab对应的盒子节点的最外层
						uni.pageScrollTo({
							duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
							scrollTop: res.top - data.top //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
						});
					}).exec();
				}).exec();

			},

			// 选择类别
			categorySelect(item) {
				this.goodsSearch(item.id, item.name)
			},
			
			
			/**
			 * 点击搜索
			 * categoryName 分类名称
			 * 1、搜索点击不带参数
			 * 2、分类点击带3级分类Id
			 */
			goodsSearch(categoryThreeId, categoryThreeName) {
				let param = ""
				if (categoryThreeId != null) {
					param = "?categoryThreeId=" + categoryThreeId +
						"&categoryThreeName=" + categoryThreeName;
				}
				uni.navigateTo({
					url: "/pages/fpage1/goods/index" + param,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
		},

	};
</script>

<style lang="less">
	/* 顶部菜单 */
	/* .cu-custom .cu-bar {
	background-image: ''!important;
} */

	.fixed {
		position: fixed;
		z-index: 99;
	}

	.VerticalNav.nav {
		width: 200upx;
		white-space: initial;
	}

	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #fff;
		margin: 0;
		border: none;
		height: 50px;
		position: relative;
	}

	.VerticalNav.nav .cu-item.cur {
		background-color: #f1f1f1;
	}

	.VerticalNav.nav .cu-item.cur::after {
		content: '';
		width: 8upx;
		height: 30upx;
		border-radius: 10upx 0 0 10upx;
		position: absolute;
		background-color: currentColor;
		top: 0;
		right: 0upx;
		bottom: 0;
		margin: auto;
	}

	.VerticalBox {
		// margin-top: 15%;
		display: flex;
	}

	.VerticalMain {
		background-color: #f1f1f1;
		flex: 1;
	}

	/* 去除下划线和显示 */
	.router-link-active {
		text-decoration: none;
		color: #ffd04b;
	}

	a {
		text-decoration: none;
		color: #333333;
	}


	page {
		background-color: #F8F9FB;
	}

	/**本页全局配置的代码**/
	.pageconfig {
		margin-top: 0%;
		width: 100%;
		height: 100vh;
		overflow: hidden;
		overflow-y: scroll;
	}

	/**本页顶部标题0的css代码**/
	.title {
		font-size: 26rpx;
		background-color: #ffffff !important;
	}
</style>
